<script>
  import {PAGE_SIZE} from "../../contants/constants.js";
  import {doGet} from "../../http/httpRequest.js";

  export default {
    name: "ReportConfig",
    inject: ['reload'],
    data() {
      return {
        queryReportConfig:{}, // 查询条件
        reportConfigs:[
            {name:'报表1',dsName:'数据源1',sqlTemplate:`select * from ds where id=1 and name= 'abc'`,roles:[{id:1,roleName:'管理员',role:'admin'},{id:2,roleName:'普通用户',role:'user'}]}
        ],
        dsOptions:[],
        pageSize: PAGE_SIZE,
        total: 0,
      }
    },
    methods: {
      getAllDsOptions(){
        doGet("system/ds/getDsOptions").then(resp => {
          if (resp.data.code === 200) {
            this.dsOptions = resp.data.data;
          }
        })
      },
      /* 获取分页数据 */
      getData(current) {
        doGet("report/config/list", this.queryReportConfig).then(resp => {
          if (resp.data.code === 200) {
            this.reportConfigs = resp.data.data.list;
            this.total = resp.data.data.total;
            console.log("分页数据", this.reportConfigs)
          }
        })

      },

      /* 改变页码 */
      handleCurrentChange(current) {
        this.getData(current);
      },
    },
    mounted() {
      this.getAllDsOptions();
      this.getData(1);
    }
  }
</script>

<template>
  <!-- 查询区域 -->
  <el-form :inline="true" :model="queryReportConfig" class="query-form">
    <el-form-item label="数据源">
      <el-select v-model="queryReportConfig.dsId" placeholder="请选择数据源" clearable filterable>
        <el-option
          v-for="item in dsOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="报表名称">
      <el-input v-model="queryReportConfig.name" placeholder="请输入报表名称" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
  <el-divider/>
  <div class="op-btn">
    <el-button type="primary" @click="addReportConfig">新增</el-button>
    <el-button type="danger"  @click="batchDelReportConfig">批量删除</el-button>
  </div>

  <!-- 列表 -->
  <el-table
    :data="reportConfigs"
    border
    stripe
    style="width: 100%"
    @selection-change="handleSelectionChange"
    class="custom-table">
    <el-table-column type="selection" width="50"/>
    <el-table-column type="index" label="序号" width="80"/>
    <el-table-column prop="name" label="报表名称"/>
    <el-table-column prop="dsName" label="数据源"/>
    <el-table-column label="SQL" width="120">
      <template #default="scope">
        <el-popover
            placement="bottom"
            trigger="hover"
            min-width="300"
            max-width="500"
            popper-class="custom-popover">
          <pre class="sql-content">{{scope.row.sqlTemplate}}</pre>
          <template #reference>
            <el-button type="text">查看</el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!--  遍历展示角色  -->
    <el-table-column prop="roles" label="角色">
      <template #default="scope">
        <el-tag v-for="role in scope.row.roles" :key="role.id">{{role.roleName}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间"/>
    <el-table-column prop="updateTime" label="更新时间"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
        <el-button type="warning" size="small" @click="detail(scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination background
                 layout="prev, pager, next, jumper, total"
                 :page-size="pageSize"
                 :total="total"
                 @current-change="handleCurrentChange"
                 class="pagination" />
</template>

<style scoped>
.custom-popover {
  max-height: 400px; /* 设置最大高度 */
  overflow-y: auto; /* 添加滚动条 */
}

.sql-content {
  white-space: pre-wrap; /* 保留空白符序列，正常换行 */
  word-wrap: break-word; /* 防止长单词溢出 */
}
.el-tag {
  margin-right: 5px;
}

.query-form {
  .el-input {
    width: 220px;
  }
  .el-select {
    width: 220px;
  }
}

.op-btn {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.custom-table ::v-deep th {
  background-color: rgb(190, 190, 190) ; /* 背景色 */
  color: #303133;
  font-weight: bold; /* 加粗字体 */
}

.custom-table ::v-deep th,
.custom-table ::v-deep td {
  padding: 10px;
  text-align: left;
}


.custom-table ::v-deep tr:nth-child(even) {
  background-color: #f9f9f9;
}

.custom-table ::v-deep tr:hover {
  background-color: #f1f1f1;
}


.pagination {
  margin-top: 20px;
}

.button-column {
  display: flex;
  flex-direction: column;
  gap: 5px; /* 设置按钮之间的间距 */
  .el-button {
    width: 80px;
    margin-left: 0 !important;
  }
}
</style>